import React from 'react'
import { useBarrageSettings } from '../hooks/useBarrageSettings'
import { SettingsButton } from './SettingsButton'
import { SettingsPanel } from './SettingsPanel'
import { SettingItem } from './SettingItem'
import { 
  FONT_SIZE_OPTIONS,
  OPACITY_OPTIONS,
  SPEED_OPTIONS,
  DISPLAY_AREA_OPTIONS,
  // FONT_COLOR_OPTIONS
} from '../types/settings'

interface BarrageSettingsProps {
  className?: string
  onSettingsChange?: (settings: any) => void
}

/**
 * 弹幕设置主组件
 * 整合设置按钮、面板和各种设置项
 */
export const BarrageSettings: React.FC<BarrageSettingsProps> = ({
  className = '',
  onSettingsChange
}) => {
  const {
    settings,
    panelState,
    settingsButtonRef,
    panelRef,
    updateSetting,
    // resetSettings,
    togglePanel,
    closePanel
  } = useBarrageSettings()

  // 当设置变更时通知父组件
  React.useEffect(() => {
    if (onSettingsChange) {
      onSettingsChange(settings)
    }
  }, [settings, onSettingsChange])


  return (
    <div className={`barrage-settings ${className}`}>
      {/* 设置按钮 */}
      <SettingsButton
        onClick={togglePanel}
        isOpen={panelState.isOpen}
        buttonRef={settingsButtonRef}
      />
      
      {/* 设置面板 */}
      <SettingsPanel
        panelState={panelState}
        panelRef={panelRef}
        onClose={closePanel}
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
          {/* 字体大小设置 */}
          <SettingItem
            label="📝 字体大小"
            description="调整弹幕文字的大小"
          >
            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
              {FONT_SIZE_OPTIONS.map(option => (
                <button
                  key={option.value}
                  onClick={() => updateSetting('fontSize', option.value)}
                  style={{
                    padding: '6px 12px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    background: settings.fontSize === option.value ? '#007bff' : 'white',
                    color: settings.fontSize === option.value ? 'white' : '#333',
                    cursor: 'pointer',
                    fontSize: '12px',
                    transition: 'all 0.2s ease',
                  }}
                >
                  {option.label}
                  <div style={{ fontSize: '10px', opacity: 0.8 }}>
                    {option.description}
                  </div>
                </button>
              ))}
            </div>
            {/* 预览文字 */}
            <div 
              style={{ 
                marginTop: '8px',
                fontSize: `${settings.fontSize}px`,
                color: '#666',
                fontWeight: 'bold'
              }}
            >
              预览文字效果
            </div>
          </SettingItem>

          {/* 透明度设置 */}
          <SettingItem
            label="🌟 透明度"
            description="调整弹幕的透明度"
          >
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
              <input
                type="range"
                min="25"
                max="100"
                step="25"
                value={settings.opacity}
                onChange={(e) => updateSetting('opacity', parseInt(e.target.value) as any)}
                style={{
                  flex: 1,
                  height: '6px',
                  borderRadius: '3px',
                  background: '#ddd',
                  outline: 'none',
                  cursor: 'pointer',
                }}
              />
              <span style={{ 
                minWidth: '40px', 
                fontSize: '14px', 
                fontWeight: '500',
                color: '#333'
              }}>
                {settings.opacity}%
              </span>
            </div>
            <div style={{ display: 'flex', gap: '4px', marginTop: '8px' }}>
              {OPACITY_OPTIONS.map(option => (
                <button
                  key={option.value}
                  onClick={() => updateSetting('opacity', option.value)}
                  style={{
                    flex: 1,
                    padding: '4px 8px',
                    border: '1px solid #ddd',
                    borderRadius: '3px',
                    background: settings.opacity === option.value ? '#007bff' : 'white',
                    color: settings.opacity === option.value ? 'white' : '#666',
                    cursor: 'pointer',
                    fontSize: '11px',
                    transition: 'all 0.2s ease',
                  }}
                >
                  {option.label}
                </button>
              ))}
            </div>
          </SettingItem>

          {/* 速度设置 */}
          <SettingItem
            label="⚡ 移动速度"
            description="调整弹幕的移动速度"
          >
            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
              {SPEED_OPTIONS.map(option => (
                <button
                  key={option.value}
                  onClick={() => updateSetting('speed', option.value)}
                  style={{
                    padding: '8px 12px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    background: settings.speed === option.value ? '#007bff' : 'white',
                    color: settings.speed === option.value ? 'white' : '#333',
                    cursor: 'pointer',
                    fontSize: '12px',
                    transition: 'all 0.2s ease',
                    minWidth: '60px',
                  }}
                >
                  {option.label}
                  <div style={{ fontSize: '10px', opacity: 0.8 }}>
                    {option.description}
                  </div>
                </button>
              ))}
            </div>
          </SettingItem>

          {/* 人物防遮盖设置 */}
          <SettingItem
            label="🎭 人物防遮盖"
            description="开启后弹幕会避开人物区域"
          >
            <label style={{ 
              display: 'flex', 
              alignItems: 'center', 
              gap: '8px',
              cursor: 'pointer'
            }}>
              <input
                type="checkbox"
                checked={settings.avoidPerson}
                onChange={(e) => updateSetting('avoidPerson', e.target.checked)}
                style={{
                  width: '18px',
                  height: '18px',
                  cursor: 'pointer',
                }}
              />
              <span style={{ fontSize: '14px', color: '#333' }}>
                {settings.avoidPerson ? '✅ 已开启' : '❌ 已关闭'}
              </span>
            </label>
          </SettingItem>

          {/* 显示区域设置 */}
          <SettingItem
            label="📺 显示区域"
            description="选择弹幕显示的区域范围"
          >
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
              {DISPLAY_AREA_OPTIONS.map(option => (
                <label
                  key={option.value}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    gap: '8px',
                    padding: '8px',
                    border: '1px solid #ddd',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    background: settings.displayArea === option.value ? '#f0f8ff' : 'white',
                    borderColor: settings.displayArea === option.value ? '#007bff' : '#ddd',
                  }}
                >
                  <input
                    type="radio"
                    name="displayArea"
                    value={option.value}
                    checked={settings.displayArea === option.value}
                    onChange={() => updateSetting('displayArea', option.value)}
                    style={{ cursor: 'pointer' }}
                  />
                  <div>
                    <div style={{ fontSize: '13px', fontWeight: '500', color: '#333' }}>
                      {option.label}
                    </div>
                    <div style={{ fontSize: '11px', color: '#666' }}>
                      {option.description}
                    </div>
                  </div>
                </label>
              ))}
            </div>
          </SettingItem>

          {/* 字体颜色设置 - 已移除 */}
        </div>
      </SettingsPanel>
    </div>
  )
}

export default BarrageSettings
